<template>
  <div class="h-[100%] overflow-auto">
    <a-card
      class="sticky top-0 z-10 product-selector"
      :bordered="false"
      :body-style="{ padding: '1rem' }"
    >
      <div class="flex flex-col gap-4">
        <div class="font-bold text-[1.5rem] flex justify-between items-center">选择商品</div>
        <a-input-search
          allow-clear
          placeholder="请输入商品名称"
          v-model:value="query.goodsName"
          @search="search"
        />
        <div>
          <a-pagination
            v-model:current="query.pageNum"
            :page-size="query.pageSize"
            :total="query.total"
            size="small"
            @change="onChange"
            simple
            responsive
            showLessItems
            showQuickJumper
          ></a-pagination>
        </div>
      </div>
    </a-card>
    <a-list
      size="small"
      :pagination="false"
      :data-source="table.data"
      :loading="table.loading"
      :load-more="true"
      split
      class="p-2"
    >
      <template #renderItem="{ item }">
        <a-list-item
          class="p-0 cursor-pointer"
          @click="selectItem(item)"
          :class="{ active: item.goodsId === productId }"
        >
          <a-list-item-meta :title="item.goodsName">
            <template #description>
              <div class="flex items-center">
                <div>条码：{{ item.barCode }}</div>
                <a-divider type="vertical" />
                <div>会员价:{{ item.memberPrice }}</div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { useQuery, useTable } from '@/hooks/table';
import { listGoods, type Goods } from '@/api/modules/data/goods';
import type { IQuery } from '@/api/config/types';

const query = useQuery<Goods>();
const productId = defineModel<string>('productId');
const modelValue = defineModel<Goods>('modelValue');
const emit = defineEmits(['select']);
const props = defineProps<{
  query?: IQuery<Goods>;
}>();

const table = useTable();
const getProduct = async () => {
  table.value.loading = true;
  const { data } = await listGoods(query.value);
  query.value.total = data.total;
  table.value.data = data.rows;
  table.value.loading = false;
};
const selectItem = (item: Goods) => {
  modelValue.value = item;
  productId.value = item.goodsId;
  emit('select', item);
};
onMounted(() => {
  if (props.query) {
    query.value = props.query;
  }
  getProduct();
});
const search = () => {
  query.value.pageNum = 1;
  getProduct();
};
const onChange = (page: number, pageSize: number) => {
  query.value.pageSize = pageSize;
  query.value.pageNum = page;
  getProduct();
};
</script>

<style lang="scss" scoped>
:deep(.ant-list-item) {
  border: 1px solid transparent;
  border-radius: var(--radius);
  &:hover {
    background: var(--hover-background);
  }
}
.active {
  outline: 1px solid var(--primary);
}
</style>
